<template>
  <page-meta>
    <navigation-bar
      title="泰科掌上宝"
      title-align="left"
      background-color="#5896f5"
    />
  </page-meta>
  <view class="content">
    <!-- 搜索栏 -->
    <my-tabbar class="my-tabbar" />
    <!-- 轮播图 -->
    <my-swiper class="my-swiper" />
    <!-- 公告栏 -->
    <uni-notice-bar
      :speed="30"
      show-icon="true"
      scrollable="true"
      color="#4a83db"
      background-color="#ffffffff"
      :text="notice"
    />
			
    <!-- 2x5宫格栏 --> 
    <my-grid />
		
    <!-- 卡片栏1 -->
    <my-card-header 
      left="校园问答"
      :reloading="reloading"
      @reload="$refs.questionCard.reload()"
      @showMore="questionShowMore()"
    >
      <my-card-body-a ref="questionCard" />
    </my-card-header>
	
    <!-- 卡片栏2 -->
    <my-card-header 
      left="正在热议"
      :show-reload="false"
    >
      <my-card-body-b
        v-for="item in topDebate"
        :key="item.id" 
        :title="item.title"
        :sub-title="item.subTitle"
      />
    </my-card-header>
    
    <!-- 可滑动悬浮按钮 -->
    <uni-fab
      horizontal="right" 
      vertical="bottom"
      :content="content"
      direction="vertical"
      @trigger="trigger"
    />
	
    <!-- 底层填充盒子 用于防止tabbar遮挡 -->
    <!-- #ifdef MP-WEIXIN -->
    <view style="height:10px" />
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <view style="height:60px" />
    <!-- #endif -->
  </view>
</template>

<script>
import myTabbar from '@/pages/index/module/myTabbar'
import mySwiper from '@/pages/index/module/mySwiper'
import myGrid from '@/pages/index/module/myGrid'
import myCardHeader from '@/pages/index/module/myCardHeader'
import myCardBodyA from '@/pages/index/module/myCardBodyA'
import myCardBodyB from '@/pages/index/module/myCardBodyB'

import { getNotice } from '@/common/api/index.js'
export default {
  components: {
    myTabbar,
    mySwiper,
    myGrid,
    myCardHeader,
    myCardBodyA,
    myCardBodyB
  }, 
  data() {
    return {
      reloading: false,
      // 公告数据
      notice: '暂无数据...',
      topDebate: [{
        id: 0,
        title: '暂无数据',
        subTitle: '暂无数据...'
      }],
      content: [{
        iconPath: '/static/question/issue.png',
        text: '发布悬赏',
        to: '/questions/publishQuestion'
      },
      {
        iconPath: '/static/question/chat.png',
        selectedIconPath: '/static/home-active.png',
        text: '吐槽交流',
        to: '/article/publishArticle'
      }
      ]
    }
  },
  onLoad() {
    getNotice().then(res => {
      this.notice = res
    })
  },
  methods: {
    questionShowMore() {
      uni.navigateTo({
        url: '/pages/questions/questionList/index'
      })
    },
    // 浮动框内容点击
    trigger(e) {
      // 判断是否登录
      if (this.$ckeckLogin()) {
        uni.navigateTo({
          url: '..' + this.content[e.index].to + '/index'
        })
      }
    }
  }
}
</script>
<style scoped>
	.content{
		height: 120px;
		background-color: #5896f5;
		padding: 0px 10px 0px 10px;
		border-radius: 0 0 20rpx 20rpx;
	}
	
</style>
